<template>
  <Modal v-model="modal" :title="title">
    <div class="tag-modal">
      <Table :columns="columns" :data="data"></Table>
    </div>
    <div slot="footer">
      <Button @click="modal = false" size="large" type="primary">关闭</Button>
    </div>
  </Modal>
</template>
<script>
import ClipboardJS from 'clipboard'
import { formatMonth } from '@/util'
export default {
  data() {
    return {
      copyBtn: null,
      item: '',
      modal: false,
      title: '',
      ym: null,
      columns: [
        {
          title: '单号',
          align: 'left',
          render: (h, params) => {
            return h('span', {
              class: 'codeName-' + params.row.id,
            }, params.row.source)
          }
        },
        {
          title: '操作',
          align: 'left',
          render: (h, params) => {
            return h('Button', {
              class: 'btn',
              props: {
                type: 'primary',
                size: 'small'
              },
              attrs: {
                'data-clipboard-target': '.codeName-' + params.row.id,
                'data-clipboard-text': params.row.source,
                'data-clipboard-action': 'copy'
              },
              on: {
                click: () => {
                  this.onCopy()
                }
              }
            }, '复制')
          }
        }
      ],
      data: []
    }
  },
  methods: {
    updateForm(item) {
      this.item = item
      this.data = [{
        id: item.id,
        source: item.source
      }]
      this.ym = formatMonth(item.recordDate)
      if (item.goldRecordTypeEnum === 'ORDER_PAYMENT' || item.goldRecordTypeEnum === 'ORDER_CANCEL') {
        this.title = '查看单号'
      } else if (item.goldRecordTypeEnum === 'STOCK_IN' || item.goldRecordTypeEnum === 'STOCK_OUT') {
        this.title = '查看条码'
      } else {
        this.title = `查看${this.ym}的任务`
      } 
      this.openModal()
    },
    openModal() {
      this.modal = true
    },
    closeModal() {
      this.modal = false
    },
    onCopy(e) {
      let clipboard = new this.$clipboard('.btn')
      clipboard.on('success', e => {
        this.$Message.success('复制成功')
        clipboard.destroy() //使用destroy可以清除缓存
      })
      clipboard.on('error',e => {
        this.$Message.error('复制失败，请手动复制')
        clipboard.destroy()
      })
    }
  }
}
</script>